<template>
  <div v-show="show" class="rt-button--large">
    <rt-button style="z-index: 1;" :class="classes" :type="type" size="large" :click="click">
      <template v-if="hasIcon">
        <slot name="icon" />
      </template>
      <span class="rt-button--bottom__text">{{text}}</span>
    </rt-button>
  </div>
</template>


<script>
export default {
  name: 'rtButtonLarge',
  props: {
    click: Function,
    text: {
      type: String,
      required: true
    },
    fixedBottom: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: 'sub'
    },
    background: {
      type: String,
      default: 'transparent' // transparent,white
    }
  },
  data() {
    return {
      clientHeight: document.documentElement.clientHeight,
      show: true
    };
  },
  mounted() {
    if (!rt.isiOS()) {
      window.addEventListener('resize', this.handleDisplay);
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleDisplay);
  },
  computed: {
    hasIcon() {
      return this.$slots.icon;
    },
    classes() {
      let buttonClass = 'rt-button--bottom';
      if (this.fixedBottom) {
        buttonClass += ' fixed-bottom';
      }
      if (this.background === 'transparent') {
        buttonClass += ' transparent';
      }
      if (this.background === 'white') {
        buttonClass += ' white';
      }
      return buttonClass;
    }
  },
  methods: {
    handleDisplay() {
      this.show = this.clientHeight <= document.documentElement.clientHeight;
    }
  }
};
</script>
